<template>
  <el-dialog
    width="800px"
    title="查询征信报告"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <div v-loading="loading">
      <el-form ref="ruleForm" :rules="rules" :model="form" label-width="140px">
        <el-form-item label="姓名" prop="cert_name">
          <el-input v-model="form.cert_name" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入电话" clearable />
        </el-form-item>
        <el-form-item label="身份证号" prop="cert_no">
          <el-input v-model="form.cert_no" placeholder="请输入身份证号" clearable />
        </el-form-item>
        <!-- <el-row>
        <el-col :span="12">-->
        <el-form-item label="身份证正面照" prop="idcard_front">
          <crop-upload
            :multiple="false"
            show-type="photo"
            :hide-delete="false"
            wrapper-width="100px"
            wrapper-height="100px"
            :photo-width="100"
            :photo-height="100"
            :init-val="companyImgUrl"
            @setVal="companyImgChange"
          />
        </el-form-item>
        <!-- </el-col>
        <el-col :span="12">-->
        <el-form-item label="身份证反面照" prop="idcard_back">
          <crop-upload
            :multiple="false"
            show-type="photo"
            :hide-delete="false"
            wrapper-width="100px"
            wrapper-height="100px"
            :photo-width="100"
            :photo-height="100"
            :init-val="doorImgUrl"
            @setVal="doorImgChange"
          />
        </el-form-item>
        <!-- </el-col>
        </el-row>-->
      </el-form>
    </div>
    <el-image-viewer
      zIndex="5999"
      v-if="showViewer"
      :on-close="showViewer=false"
      :url-list="[$globalObj.imgBaseUrl + previewUrl]"
    />
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="closeFun">取 消</el-button>
      <el-button size="small" type="primary" @click="submit">确认查询</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getFirstCreditData, getCreditData2 } from '@/api/order'
import cropUpload from '@/components/cropUpload'
import { getName } from '@/utils/auth'
export default {
  components: {
    cropUpload,
  },
  props: {
    mode: {
      type: String,
      default: 'add',
    },
  },
  data() {
    return {
      form: {
        cert_name: '',
        mobile: '',
        cert_no: '',
        idcard_front: '',
        idcard_back: '',
      },
      rules: {
        cert_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        cert_no: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
      },
      dialogVisible: false,
      showViewer: false,
      previewUrl: '',
      key: 'company202410121751',
      service: 'credit2',
      loading: false,
    }
  },
  computed: {
    doorImgUrl() {
      return this.form.idcard_back ? [this.form.idcard_back] : ''
    },
    companyImgUrl() {
      return this.form.idcard_front ? [this.form.idcard_front] : ''
    },
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.$refs['ruleForm'].resetFields()
      }
    },
  },
  methods: {
    initSetForm(setData, isOpen = false) {
      return new Promise((resolve) => {
        for (const key in this.form) {
          if (setData && Object.prototype.hasOwnProperty.call(setData, key)) {
            this.form[key] = setData[key]
          } else {
            this.form[key] = ''
          }
        }
        if (isOpen) this.dialogVisible = true
        resolve(true)
      })
    },
    submit() {
      if (this.loading) return
      let that = this
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          console.log('表单提交---', this.form)
          let params = { key: this.key, service: this.service, ...this.form }
          that.loading = true
          getFirstCreditData(params)
            .then(async (res1) => {
              if (res1) {
                // let username = getName()
                setTimeout(async () => {
                  let res2 = await getCreditData2(params).catch((ee) => {
                    that.loading = false
                  })
                  that.loading = false
                  if (res2) {
                    console.log('res2xx', res2)
                    that.$message.success('查询成功，请到下方列表查看详细情况')
                    that.closeFun()
                    that.$emit('refreshList')
                  } else {
                    that.$message.error('生成征信报告错误！')
                  }
                }, 3500)
              }
            })
            .catch((e) => {
              that.$message.error('请求失败！')
              that.loading = false
            })

          // this.refreshList()
        } else {
          this.$message({
            message: '请填写完整的信息',
            type: 'error',
          })
          return false
        }
      })
    },
    closeFun() {
      this.form = {
        cert_name: '',
        mobile: '',
        cert_no: '',
        idcard_front: '',
        idcard_back: '',
      }
      this.dialogVisible = false
    },
    doorImgChange(params) {
      this.form.idcard_back = params
    },
    companyImgChange(params) {
      this.form.idcard_front = params
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
